<template>
  <div>
    {{ msg }}
    <h2>{{ seen }}</h2>
    <h2>{{ random() }}</h2>
    <v-btn @click="hide">
      隐藏
    </v-btn>
    <v-btn @click="show">
      显示
    </v-btn>
    <v-btn @click="sw">
      切换
    </v-btn>
    <h2
      v-text="heros"
      v-if="seen"
    />
    <h2 v-html="heros" />
  </div>
</template>

<script>
export default {
  data: () => ({
    msg: 'hello world',
    seen: true,
    heros: ['Allmight'],
  }),
  methods: {
    // 用methods来定义一个方法
    random() {
      return Math.floor(Math.random() * 101);
    },
    hide() {
      this.seen = false;
    },
    show() {
      this.seen = true;
    },
    sw() {
      this.seen = !this.seen;
    },
  },
};
</script>
